<!--  角色列表-->
<template>
  <div class="Role">
    <Crumbs />
    <main class="Role_content">
      <section class="search">
        <div class="search_header">
          <div class="search_header_l">
            <el-icon><Search /></el-icon><span>筛选搜索</span>
          </div>
          <div class="search_header_r">
            <el-button @click="resetFn">重置</el-button>
            <el-button type="primary" @click="queryFn">查询结果</el-button>
          </div>
        </div>
        <section class="search_content">
          <ul class="search_list">
            <li class="search_item">
              <span>角色名称:</span>
              <el-input placeholder="请输入角色名称" v-model="keywoed" />
            </li>
          </ul>
        </section>
      </section>
      <DataList />
      <el-table :data="tableData" border class="roleTable">
        <el-table-column prop="id" label="编号" width="60" align="center" />
        <el-table-column prop="name" label="角色名称" align="center" />
        <el-table-column prop="description" label="描述" align="center" />
        <el-table-column prop="adminCount" label="用户数" align="center" />
        <el-table-column label="添加时间" align="center">
          <template #default="scope">
            {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:MM:SS') }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button text type="primary" align="center">
            分配资源
          </el-button> </el-table-column
        >>
      </el-table>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue';
import Crumbs from '../../components/Common/Crumbs.vue';
import DataList from '../../components/Common/DataList.vue';
import { GetRoleListAllApi, GetRoleListApi } from '../../request/api';
import moment from 'moment';
function fetchData() {
  GetRoleListAllApi().then((res) => {
    if (res.code == 200) {
      // console.log(res);
      tableData.value = res.data;
    }
  });
}
fetchData();
let tableData = ref([]);
let keywoed = ref('');
// 查询结果
function queryFn() {
  GetRoleListApi({
    keyword: keywoed.value,
    pageNum: 1,
    pageSize: 5,
  }).then((res) => {
    if (res.code == 200) {
      // console.log(res);
      tableData.value = res.data.list;
    }
  });
}
// 重置
function resetFn() {
  keywoed.value = '';
  fetchData();
}
</script>
<style lang="less" scoped>
.Role {
  .Role_content {
    padding: 10px 20px;
    .search {
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      margin-top: 20px;
      .search_header {
        display: flex;
        justify-content: space-between;
      }
      .search_content {
        margin-top: 20px;
        .search_list {
          margin-left: 100px;
          .search_item {
            margin-bottom: 20px;
            span {
              width: 85px;
              margin-right: 10px;
            }
            :deep(.el-input) {
              width: 250px;
              height: 40px;
            }
          }
        }
      }
    }
    .roleTable {
      margin-top: 20px;
      width: 100%;
    }
  }
}
</style>
